<template>
  <yc-container>
    <el-container>
      <el-aside>
        <yc-card>
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar :user="user" :avatarUrl="user.avatar" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <yc-icon name="user" class="icon" />用户昵称
                <div class="pull-right">{{ user.nickname }}</div>
              </li>
              <li class="list-group-item">
                <yc-icon name="phone" class="icon" />手机号码
                <div class="pull-right">{{ user.phone }}</div>
              </li>
              <li class="list-group-item">
                <yc-icon name="envelope-o" class="icon" />邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <yc-icon name="envelope-o" class="icon" />年龄
                <div class="pull-right">{{ user.age }}</div>
              </li>
              <li class="list-group-item">
                <yc-icon name="tree" class="icon" />部门
                <div class="pull-right">
                  {{ user.dept ? user.dept.name:'' }}
                </div>
              </li>
              <li class="list-group-item">
                <yc-icon name="wheelchair-alt" class="icon" />岗位
                <div class="pull-right">
                  {{user.post ? user.post.name:''}}
                </div>
              </li>
              <li class="list-group-item">
                <yc-icon name="male" class="icon" />角色
                <div class="pull-right">
                  <el-tag size="mini" v-for="(item,index) in user.roleList" :key="index" style="margin-right: 5px;">
                    {{item.name}}</el-tag>
                </div>
              </li>
              <li class="list-group-item">
                <yc-icon name="calendar" class="icon" />创建日期
                <div class="pull-right">{{ parseTime(user.createTime) }}</div>
              </li>
              <li class="list-group-item">
                <yc-icon name="calendar" class="icon" />安全设置
                <div class="pull-right">
                  <yc-button type="text" style="padding:0px" label="修改密码" @click="updatePassword" />
                </div>
              </li>
            </ul>
          </div>
        </yc-card>
      </el-aside>
      <el-main>
        <yc-card>
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="用户资料" name="first">
              <yc-form ref='userForm' v-model="userFormData" :setting="userFormSetting"
                :itemSetting="userFormItemSetting" />
              <yc-bar>
                <yc-bar-cell />
                <yc-bar-cell />
                <yc-bar-cell />
                <yc-bar-cell />
                <yc-bar-cell>
                  <yc-button type="primary" size="mini" icon="el-icon-plus" label="保存" thin @click="handleUserSave" />
                </yc-bar-cell>
              </yc-bar>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="second"></el-tab-pane>
          </el-tabs>
        </yc-card>
      </el-main>
    </el-container>
    <yc-dialog width="600px" :mode="mode" :conf="dialogConf" @on-submit="handleSubmit">
      <yc-form ref="dialogForm" v-model="dialogFormData" :setting="dialogFormSetting"
        :itemSetting="dialogFormItemSetting" />
    </yc-dialog>
  </yc-container>
</template>

<script>
import userAvatar from './user-avatar'
import { getUserInfo, saveUserInfo, updatePassword } from '@/api/management/user'
import util from '@/libs/util'
export default {
  name: 'profile',
  components: {
    userAvatar
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.dialogFormData.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      user: {},
      activeName: 'first',
      userFormData: {},
      userFormSetting: {
        useLayout: true,
        inline: false,
        size: 'mini',
        labelPosition: 'right',
        labelWidth: '90px'
      },
      userFormItemSetting: [
        {
          prop: 'nickname',
          default: '',
          title: '用户昵称',
          col: { span: 24 },
          name: 'input',
          rule: { required: true, message: '请输入用户昵称', trigger: 'change' },
          visible: true,
          placeholder: '请输入用户昵称'
        },
        {
          prop: 'phone',
          default: '',
          title: '手机号码',
          col: { span: 24 },
          name: 'input',
          rule: { required: true, message: '请输入手机号码', trigger: 'change' },
          visible: true,
          placeholder: '请输入手机号码'
        },
        {
          prop: 'email',
          default: '',
          title: '邮箱',
          col: { span: 24 },
          name: 'input',
          rule: { required: true, message: '请输入邮箱', trigger: 'change' },
          visible: true,
          placeholder: '请输入邮箱'
        },
        {
          prop: 'age',
          default: '',
          title: '年龄',
          col: { span: 24 },
          name: 'input',
          rule: { required: true, message: '请输入年龄', trigger: 'change' },
          visible: true,
          placeholder: '请输入年龄'
        },
        {
          prop: 'sex',
          default: 1,
          title: '性别',
          col: { span: 24 },
          name: 'dict-radio',
          dictName: 'sex_type',
          visible: true
        }
      ],
      mode: 'update',
      dialogConf: {
        dialogVisible: false
      },
      dialogFormData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      dialogFormSetting: {
        useLayout: true,
        inline: false,
        size: 'mini',
        labelPosition: 'right',
        labelWidth: '150px'
      },
      dialogFormItemSetting: [
        {
          prop: 'oldPassword',
          default: '',
          title: '旧密码',
          col: { span: 18 },
          name: 'input',
          type: 'password',
          rule: { required: true, message: '请输入旧密码', trigger: 'blur' },
          visible: true,
          placeholder: '请输入旧密码'
        },
        {
          prop: 'newPassword',
          default: '',
          title: '新密码',
          col: { span: 18 },
          name: 'input',
          type: 'password',
          rule: { required: true, message: '请输入新密码', trigger: 'blur' },
          visible: true,
          placeholder: '请输入新密码'
        },
        {
          prop: 'confirmPassword',
          default: '',
          title: '确认密码',
          col: { span: 18 },
          name: 'input',
          type: 'password',
          rule: { required: true, validator: validatePass, trigger: 'blur' },
          visible: true,
          placeholder: '再一次输入密码'
        }
      ]
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {

  },
  methods: {
    parseTime: util.parseTime,
    getUserInfo () {
      getUserInfo().then(res => {
        var { code, data } = res
        if (code === 200) {
          this.user = data
          this.userFormData = this.$_.cloneDeep(data)
        }
      })
    },
    handleTabClick (tab, event) {
      console.log(tab, event)
    },
    handleUserSave () {
      var callBackForm = { valid: undefined }
      this.$refs.userForm.validate(callBackForm)
      if (callBackForm.valid !== undefined && callBackForm.valid === false) {
        return
      }
      saveUserInfo(this.userFormData).then(res => {
        var { code, data } = res
        if (code === 200) {
          this.userFormData = this.$_.cloneDeep(data)
          this.$message.success('保存成功')
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    updatePassword () {
      this.dialogConf.dialogVisible = true
    },
    handleSubmit (callBack) {
      updatePassword(this.dialogFormData).then(res => {
        var { code } = res
        if (code === 200) {
          this.$message.success('修改成功')
        } else {
          this.$message.error('修改失败')
        }
        callBack(code === 200)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0px 0px 0px 20px;
}
.el-aside {
  width: 400px !important;
}
.text-center {
  text-align: center;
}
.list-group {
  padding-left: 0;
  list-style: none;
}
.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
}
.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.icon {
  padding-right: 5px;
}
</style>
